<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons::common_header"><!-- 引入头文件 -->
</head>
<body>
<link rel="stylesheet" th:href="@{/static/css/zTreeStyle.css}"/>
<link rel="stylesheet" th:href="@{/static/css/jquery-ui.min.css}"/>
<link rel="stylesheet" th:href="@{/static/css/jquery-ui-1.10.4.custom.css}"/>
<nav th:replace="commons::common_nav"></nav><!-- 引入导航栏 -->
<div th:replace="commons::common_pwdmodal"></div><!-- 引入密码修改框 -->
<!-- 软件管理模块整理视图 -->
<div class="container" style="width: 1500px; margin-top: 50px">
    <div class="panel panel-default" style=" width: 98%; margin-left: 1%;">
        <!-- 表头功能按键 -->
        <div class="panel-heading">
            <div class="pull-right">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary" onclick="uploadSoftware()">
                        软件上传
                    </button>
                </div>&nbsp;
                <div class="btn-group">
                    <button type="button" class="btn btn-success" onclick="location.reload()">
                        刷新
                    </button>
                </div>
            </div>
            <h5> 软件管理 </h5>
        </div>

        <!-- 表格主体 -->
        <div class="panel-body">
            <!-- 主体左侧树状目录 -->
            <div class="panel panel-default col-sm-2"
                 style="overflow-y:auto; overflow-x:auto; width:280px; height: 650px;">
                <form class="form-inline" style="width:260px;" role="form" id="treequeryform" name="treequeryform"
                      action="/DMIL/software/list" method="post">
                    <!--suppress ALL--><!-- 该注解决EL表达式报错——关闭检测下一行表达式 -->
                    <input id="typeid" type="hidden" th:value="${typeid}"><!-- 焦点所在父节点 -->
                    <!--suppress ALL--><!-- 该注解决EL表达式报错——关闭检测下一行表达式 -->
                    <input id="erpcode" type="hidden" th:value="${erpcode}"><!-- 焦点所在子节点 -->
                    <!--suppress ALL--><!-- 该注解决EL表达式报错——关闭检测下一行表达式 -->
                    <input id="msg" type="hidden" th:value="${msg}"><!-- 焦点所在父节点 -->
                    <!--<div class="btn-group">&lt;!&ndash;suppress ALL&ndash;&gt;-->
                        <!--<input id="softwarename" name="softwarename" type="text" class="form-control" th:value="${softwarename}"-->
                               <!--placeholder="请输入软件名称"/>-->
                    <!--</div>-->
                    <!--<div class="btn-group">-->
                        <!--<button type="button" onclick="searchSoftwareByName()" class="btn btn-primary">查询</button>-->
                    <!--</div>-->
                </form>
                <ul id="softwareNameTree" class="ztree"></ul>
            </div>

            <!-- 主体右侧软件信息表格 -->
            <div class="panel panel-default col-sm-10" style=" left:10px; width:1100px; height:650px;">
                <table class="table table-striped line row scroll-bar" style="table-layout: fixed; display:block; height: 500px; overflow: auto"><!--suppress ALL-->
                    <thead th:if="${datalist.size() > 0}">
                        <tr>
                            <th>
                                <input type="checkbox" id="checkRow_head" name="checkRow_" value="" onclick="checkPageSelected_(this);"/>
                            </th>
                            <th>软件erp</th>
                            <th>软件说明</th>
                            <th>版本号</th>
                            <th>备注</th>
                            <th>上传时间</th>
                            <th>软件二维码</th>
                            <th>操作</th>
                        </tr>
                    </thead><!--suppress ALL-->
                    <tbody th:if="${datalist.size() > 0}">
                        <!--suppress ALL-->
                        <tr th:each="software : ${datalist}">
                            <th scope="row"><!--suppress ALL-->
                                <input type="checkbox" name="checkRow_" onclick="checkRowSelected_(this)"/>
                            </th><!--suppress ALL-->
                            <td th:text="${software.erpcode}" style="width: 10%"></td><!--suppress ALL-->
                            <td th:text="${software.customername}" style="width: 22%"></td><!--suppress ALL-->
                            <td th:text="${software.softwareversion}" style="width: 11%"></td><!--suppress ALL-->
                            <td th:text="${software.remark}" style="width: 10%"></td><!--suppress ALL-->
                            <td th:text="${#dates.format(software.uploadtime,'yyyy-MM-dd HH:mm:ss')}" style="width: 15%"></td>
                            <td style="width: 10%"><!--suppress ALL-->
                                <button type="button" class="btn-xs btn-info" th:onclick="|getQRcode(${software.id})|">
                                    查看二维码
                                </button>
                            </td>
                            <td style="width: 22%"><!--suppress ALL-->
                                <button type="button" class="btn-xs btn-primary" th:onclick="|downSoftware(${software.id})|">
                                    下载
                                </button><!--suppress ALL-->&nbsp;
                                <!--<button type="button" class="btn-xs btn-primary" th:onclick="|pubSoftware(${software.id})|">
                                    升级
                                </button>&lt;!&ndash;suppress ALL&ndash;&gt;&nbsp;-->
                                <button type="button" class="btn-xs btn-danger" th:onclick="|deleteSoftware(${software.id})|">
                                    删除
                                </button><!--suppress ALL-->&nbsp;
                                <button type="button" class="btn-xs btn-info" th:onclick="|remarkSoftware(${software.id})|">
                                    备注
                                </button>
                            </td>
                        </tr>
                    </tbody><!--suppress ALL-->
                    <tbody th:if="${datalist.size() == 0}">
                        <div class="pagenodate" style="padding-top: 50px"><label style="color:red;">没有符合您要求的记录</label></div>
                    </tbody>
                </table>
                <!-- 分页组件 -->
                <div th:replace="commons::common_paginater"></div>
            </div>
        </div>
    </div>
</div>

<!-- 软件上传界面modal -->
<div class="modal fade" id="uploadDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 620px;">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">软件上传</h4>
            </div>
            <div class="modal-body col-sm-12">
                <form class="form-horizontal" id="softwareFormAdd" name="softwareFormAdd" role="form" method="post"
                      enctype="multipart/form-data">
                    <div class="form-group" style="margin-right: 0px;">
                        <div class="col-sm-4 text-nowrap">
                            <div class="row">
                                <span class="col-sm-4 control-label"
                                      style="color:red;">*</span>
                                <span class="col-sm-6 control-label"
                                      style="padding-left: 0px;padding-right: 10%;">选择文件：</span>
                            </div>
                            <div class="row">
                                <span class="col-sm-11 control-label"
                                      style="color:red;">（大小限制：1GB）</span>
                            </div>
                        </div>
                        <div class="col-sm-8" style="padding-left: 0px">
                            <input type="file" name="file" id="zipFile" class="btn btn-info"
                                   data-show-upload="false" data-show-remove="false" data-show-preview="false"
                                   data-allowed-file-extensions='["zip"]'>
                        </div>
                    </div>
                </form>
            </div>

            <!--  进度条显示效果 -->
            <div class="demo col-sm-12">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12" style="width: 580px; text-align: center;">
                            <div class="progress">
                                <div class="progress-bar progress-bar-info progress-bar-striped active" id="mt-progress-length" style="width: 0%;">
                                    <div class="progress-value" id="mt-progress-value">0%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <span id="spanIdForSearch" style="font-size: 18px" class="pull-left" hidden="hidden">上传中...</span>
                <button id="softwareTypeSave" name="softwareTypeSave" type="button" class="btn btn-primary" onclick="softwareSave()">
                    上传
                </button>
                <button type="button" class="btn btn-default" onclick="uploadcancel()">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 二维码展示 -->
<div class="modal fade" id="QrCodeDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 420px;">
            <div class="modal-header">
                <h4 class="modal-title" id="versionModal">软件二维码</h4>
            </div>
            <form class="form-horizontal" id="msgpost" name="msgpost" role="form" method="post" enctype="multipart/form-data">
                <div class="modal-body" style="text-align: center">
                    <img id="qrcode" style="width: 90%; padding-bottom: 20%"/>
                </div>
            </form>
            <div class="modal-footer" id="versionfoot">
                <button id="postType" name="postType" type="button" class="btn btn-primary"
                        onclick="downqr()">保存
                </button>
                <button type="button" class="btn btn-default" onclick="closeqr()">返回</button>
            </div>
        </div>
    </div>
</div>

<!-- 备注框 -->
<div class="modal fade" id="RemarkDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 420px;">
            <div class="modal-header">
                <h4 class="modal-title" id="RemarkModal">软件备注</h4>
            </div>
            <form class="form-horizontal" id="repost" name="repost" role="form" method="post" enctype="post">
                <div class="form-group" style="margin-right: 0px; padding-top: 10px">
                    <label for="remark" class="col-md-4 control-label"
                           style="padding-left: 0px;padding-right: 5%;">修改备注:</label>
                    <div class="col-md-8" style="padding-left: 0px">
                        <input type="text" class="form-control " id="remark" name="remark">
                    </div>
                </div>
            </form>
            <div class="modal-footer" id="refoot">
                <button id="savere" name="savere" type="button" class="btn btn-primary"
                        onclick="savere()">保存
                </button>
                <button type="button" class="btn btn-default" onclick="closere()">返回</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/jquery-ui.min.js}"></script>
<script th:src="@{/static/js/jquery.ztree.all-3.5.min.js}"></script>
<!-- th:inline="javascript" 必须添加，作为js后台取值的手段 -->
<script th:inline="javascript">
    /** -----表格左侧树状目录加载组方法 start----- **/
    /* 设置树形目录参数 */
    var setting = {
        view: {
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeClick: zTreeBeforeClick
        }
    };

    /* 初始化查询,保留之前的选中状态 */
    var zNodes = [[${menuTreeBeans}]];
    var zTree;
    $(document).ready(function () {
        zTree = $.fn.zTree.init($("#softwareNameTree"), setting, zNodes);
        var treeObj = $.fn.zTree.getZTreeObj("softwareNameTree");
        var typeid = $('#typeid').val();
        var erpcode = $('#erpcode').val();
        var msg = $('#msg').val();
        var node = null;
        if (typeid != "") {
            node = treeObj.getNodeByParam("id", typeid, null);
        }
        if (erpcode != "") {
            node = treeObj.getNodeByParam("id", erpcode, null);
        }
        if (node != null) {
            $("#" + node.tId + "_a").attr('class', 'curSelectedNode');
        }

        //显示回调信息
        if (msg != "") {
            alert(msg);
        }
    });

    /* 点击项目树查询: treeNode.id（为节点id），treeNode.pid（父节点id），treeNode.tId（菜单名_节点自然顺序） */
    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        if (treeNode.getParentNode() == null) {
            /*若没有父节点,则父节点为根节点，向一级菜单跳转*/
            location.href = "/DMIL/software/list?typeid="+ treeNode.id +"&erpcode=0" + "&pageSize=" + $("#pageSize").val();
        } else {
            /*若父节点存在，则该节点为叶子节点，根据条件跳转*/
            location.href = "/DMIL/software/list?typeid="+ treeNode.pid +"&erpcode="+ treeNode.id + "&pageSize=" + $("#pageSize").val();
        }
    };

    /*点击查询按钮查询树状目录*/
    function searchSoftwareByName() {
        var softwarename = $("#softwarename").val();
        var typeid = $('#typeid').val();
        var erpcode = $('#erpcode').val();
        //alert("softwarename:"+softwarename+"\ntypeid:"+typeid+"\nerpcode:"+erpcode+"\npage:"+[[${page}]])
        location.href = "/DMIL/software/list?typeid="+ typeid +"&erpcode="+ erpcode +"&softwarename="+ encodeURI(softwarename)
            +"&page=1" + "&pageSize=" + $("#pageSize").val();
    }

    /** -----表格左侧树状目录加载组方法 end----- **/

    /*打开上传软件弹窗*/
    function uploadSoftware() {
        $('#uploadDialog').modal('show');
    }

    /*取消上传，关闭弹窗*/
    function uploadcancel() {
        $('#uploadDialog').modal('hide');
        $("#zipFile").val("");
    }

    /*上传软件*/
    function softwareSave() {
        var zipFile = $("#zipFile").val().trim();
        if (zipFile == "") {
            alert("未上传，请选择文件！");
            return false;
        }
        //判断格式是否正确
        if (".zip" != zipFile.substring(zipFile.lastIndexOf("."))) {
            alert("文件格式错误：请上传.zip格式的文件！");
            return false;
        }

        //获取上传软件
        var formObj = document.getElementById("softwareFormAdd");

        //软件大小
        var fileSize = 0;
        //限制大小，1GB
        var limited = 1024*1024*1024;

        //限制文件大小，兼用IE7、8
        if(window.ActiveXObject){
            var path = formObj.value;
            var fileActObj = new ActiveXObject("Scripting.FileSystemObject");
            fileSize = fileActObj.GetFile(path).size;
        } else {
            //其他浏览器
            fileSize = document.getElementById("zipFile").files[0].size;
        }
        if(fileSize > limited){
            alert("文件超过1GB，无法上传！");
            location.reload();
            return false;
        }

        //背景恢复
        //$(".progress").css("background", "#28a745");
        //归零 隐藏
        $("#mt-progress-length").css({"width": "0%", "opacity": "1"});
        $("#mt-progress-value").html(0);
        $("#spanIdForSearch").show();

        $.ajax({
                type: "POST"
                , url: "/DMIL/software/softwareAdd"
                , data: new FormData(formObj)
                , processData: false
                , contentType: false
                , cache: false
                , enctype: 'multipart/form-data'
                , xhr: function () {
                    //获取ajax中的ajaxSettings的xhr对象  为他的upload属性绑定progress事件的处理函数
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        //检查其属性upload是否存在
                        myXhr.upload.addEventListener("progress", resultProgress, false);
                    }
                    return myXhr;
                }
                , success: function (data) {
                    if (data.obj1 == "success") {
                        var date1 = new Date();
                        $("#spanIdForSearch").hide();
                        var date2 = new Date();
                        var timeout1 = setTimeout(function () {
                            alert("软件上传成功！");
                            location.reload();
                        }, date2 - date1);
                    } else {
                        $("#spanIdForSearch").hide();
                        alert(data.obj1);
                    }
                }
                , error: function (data) {
                    alert("上传异常！");
                    location.reload();
                }
            }
        );

    }

    //上传进度回调函数
    function resultProgress(e) {
        if (e.lengthComputable) {
            var percent = e.loaded / e.total * 100;
            $(".show_result").html(percent + "%");
            var percentStr = String(percent);
            if (percentStr == "100") {
                percentStr = "100.0";
            }
            percentStr = percentStr.substring(0, percentStr.indexOf("."));
            $("#mt-progress-value").html(percentStr);
            $("#mt-progress-length").css("width", percentStr + "%");

            if (percentStr == "100") {
                setTimeout(function () {
                    //背景成绿色
                    //$(".progress").css("background", "#15AD66");
                    //归零 隐藏
                    $("#mt-progress-length").css({"width": "0%", "opacity": "0"});
                }, 50);


            }
        }
    }

    //下载软件
    function downSoftware(id) {
        location.href = "/DMIL/software/downSoftware?id="+ id;
    }

    //升级软件
    function pubSoftware(id) {
        if (confirm("确定向所有运行该软件的设备发布升级命令？")) {
            $.ajax({
                type: "POST"
                , url: "/DMIL/software/pubforsoftware"
                , data: {id: id}
                , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
                , enctype: 'multipart/form-data'
                , cache: false
                , success: function (data) {
                    if (data.obj1 == 'success') {
                        alert("发布升级成功！");
                    } else {
                        alert(data.obj1);
                    }
                    location.reload();
                }
                , error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //alert(XMLHttpRequest.status + textStatus);
                }
            });
        }
    }

    //删除指定软件
    function deleteSoftware(id) {
        if (confirm("确定删除已上传的软件包？")) {
            $.ajax({
                type: "POST"
                , url: "/DMIL/software/deleteSoftware"
                , data: {id: id}
                , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
                , enctype: 'multipart/form-data'
                , cache: false
                , success: function (data) {
                    if (data.obj1 == "success") {
                        alert("数据删除成功！");
                    } else {
                        alert(data.obj1);
                    }
                    location.reload();
                }
                , error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //alert(XMLHttpRequest.status + textStatus);
                }
            });
        }
    }

    //获取二维码
    function getQRcode(id) {
        $.ajax({
            type: "POST"
            , url: "/DMIL/software/getqrcode"
            , data: {id: id}
            , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
            , dataType: "json"
            , cache: false
            , success: function (data) {
                if (data.obj1 == 'success') {
                    console.log("获取成功");
                    //展示二维码
                    $("#qrcode").attr("src", data.obj2);
                    $('#QrCodeDialog').modal('show');
                    qryrl = data.obj2;
                } else {
                    alert(data.obj1);
                }
            }
            , error: function (XMLHttpRequest, textStatus, errorThrown) {
                //alert(XMLHttpRequest.status + textStatus);
            }
        });
    }

    var qryrl = "";
    //下载二维码
    function downqr() {
        if (qryrl != "") {
            location.href = qryrl;
        } else {
            alert("无法保存：请刷新页面后重试！")
        }
    }

    /*关闭二维码*/
    function closeqr() {
        $('#QrCodeDialog').modal('hide');
    }

    /*打开备注*/
    var remarkid = 0;
    function remarkSoftware(id) {
        remarkid = id;
        $('#remark').val("");
        $('#RemarkDialog').modal('show');
    }

    /*保存备注*/
    function savere() {
        var remark = $("#remark").val();
        $.ajax({
            type: "POST"
            , url: "/DMIL/software/remarksoftware"
            , data: {id: remarkid, remark:remark}
            , contentType: "application/x-www-form-urlencoded;charset=utf-8;"
            , dataType: "json"
            , cache: false
            , success: function (data) {
                if (data.obj1 == 'success') {
                    $('#RemarkDialog').modal('hide');
                    location.reload();
                } else {
                    alert(data.obj1);
                }
            }
            , error: function (XMLHttpRequest, textStatus, errorThrown) {
                //alert(XMLHttpRequest.status + textStatus);
            }
        });
    }

    /*关闭备注*/
    function closere() {
        $('#RemarkDialog').modal('hide');
    }

</script>
</body>
</html>